

<template>
    <tm-app class="groupMembers" bgImg="f5">
        <!-- <image
            class="psa"
            style="width:750rpx;height:834rpx;top:0;left:0;right:0;z-index:1;"
            src="../../static/bg1.jpg"
            mode=""
        ></image> -->
        <view
            style="background: #fff"
            :style="{ height: systemInfo.statusBarHeight + 'px' }"
        ></view>
        <view
            class="slim_header d-flex a-center j-center"
            :style="{ top: systemInfo.statusBarHeight + 'px' }"
        >
            <view class="left_box" @tap="goBack">
                <image src="/static/center/back.png" class="back"></image>
            </view>
            <view class="title d-flex a-center j-between">群名称备注</view>
            <view class="right_box">
                <!-- <image src="/static/center/dian.png" class="dian"></image> -->
            </view>
        </view>
        <view
            class="content"
            :style="{ top: `calc(100rpx + ${systemInfo.statusBarHeight}px)` }"
        >
            <view class="slim_box">
                <view class="row d-flex a-center j-between">
                    <text class="text">群名称备注</text>
                    <input
                        style="width:400rpx"
                        class="inp"
                        v-model="group_nick"
                        placeholder-style="color:#ccc"
                        placeholder="请输入"
                        type="text"
                        @input="checkLength(16)"
                    />
                </view>
                
            </view>

             <!-- <view class="d-flex a-center j-center" style="margin-top:50rpx;"><tm-button class="btn_main" :width="680" :shadow="-1" :linear-color="['#64F1C5','#29DBA3']" linear="left" :fontSize="32" fontColor="#ffffff" @tap="SetGroupMemberCustomField" label="确认修改"></tm-button></view> -->
        </view>


        <view class="btn_bottom_box">
            <view class="btn_main_r" @tap="SetGroupMemberCustomField">
                <text class="text">确认修改</text>
            </view>
                <view class="bottom_seat"></view>
        </view>



    </tm-app>
</template>

<script setup lang="ts">
import { ref, reactive,nextTick } from "vue";
import { onReady, onShow, onLoad,onUnload } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { groupUpdate} from "@/api/api";
import { setGroupMemberCustomField } from "@/hooks/imHooks";
import { config as configStore } from "@/store/config";


const groupId = ref('')

const goBack = () => {
    uni.navigateBack();
};


const userData: any = userDataStore();

const systemInfo: any = systemInfoStore();

const bool = ref(false);
const updateLoading = ref(false);

const group_nick = ref('');

const checkLength = (maxLength:number)=>{
    let content = group_nick.value.trim();
    let str = ''
    let len=0;
    for(var i=0; i<content.length; i++) {
        //正则表达式判断中文
        if (/[\u4e00-\u9fa5]/.test(content[i])) {
            len+=2;
        } else {
            len++;
        }

        if(len<=maxLength){
            str+=content[i];
        }
    }
    nextTick(() => {
        group_nick.value = str;
    })
}




const SetGroupMemberCustomField = async()=>{
    if(updateLoading.value){
        return;
    }
    updateLoading.value = true;
    uni.showLoading();




    const res:any = await setGroupMemberCustomField({groupID:groupId.value,memberCustomField:[{key: 'group_nick', value:group_nick.value||''}]});
    const { code,data } = res;
    updateLoading.value = false;
    if(code!==0){
        uni.hideLoading();
        uni.showToast({
            icon: "none",
            title: '群名称备注失败,请稍后再试',
            duration: 1500,
        });
        return;
    }

    setTimeout(()=>{
        uni.hideLoading();
        uni.showToast({
            icon: "none",
            title: '备注成功',
            duration: 1500,
        });
        goBack();
    },500)

    

}


onReady(() => {});

onLoad((option: any) => {
    if (option.groupID) {
        groupId.value = option.groupID;
        group_nick.value = option.group_nick||'';
    }
});

onUnload(() => {});

onShow(() => {});
</script>

<style lang="scss" scoped>
.groupMembers{

    .btn_main{
        border-radius: 50rpx;
    }

    .content{
        position:absolute;
        width:750rpx;
        left:0;
        right:0;
        padding-top:20rpx;
        bottom: constant(safe-area-inset-bottom);
        bottom: env(safe-area-inset-bottom);
        .notice{
            background:#f5f5f5;
            padding:20rpx;
            border-radius: 20rpx;
        }
    }

}
</style>
